<template>
  <div class="wrapper">
    <div id="map"></div>
    <!-- <canvas id="canvas"></canvas> -->
  </div>
</template>

<script>
import BMap from "BMap";
var mapv = require("mapv");
export default {
  name: "line1",
  components: {},
  props: {},
  data() {
    return {};
  },
  watch: {},
  computed: {},
  methods: {
    init() {
      // 百度地图API功能
      var map = new BMap.Map("map", {
        enableMapClick: false
      }); // 创建Map实例
      map.centerAndZoom(new BMap.Point(106.563777, 29.578285), 12); // 初始化地图,设置中心点坐标和地图级别
      map.enableScrollWheelZoom(true); // 开启鼠标滚轮缩放

      // 地图自定义样式
      map.setMapStyle({
        styleJson: [
          {
            featureType: "land",
            elementType: "geometry",
            stylers: {
              color: "#212121"
            }
          },
          {
            featureType: "building",
            elementType: "geometry",
            stylers: {
              color: "#2b2b2b"
            }
          },
          {
            featureType: "highway",
            elementType: "all",
            stylers: {
              lightness: -75,
              saturation: -91
            }
          },
          {
            featureType: "arterial",
            elementType: "geometry",
            stylers: {
              lightness: -82,
              saturation: -94
            }
          },
          {
            featureType: "green",
            elementType: "geometry",
            stylers: {
              color: "#1b1b1b"
            }
          },
          {
            featureType: "water",
            elementType: "geometry",
            stylers: {
              color: "#181818"
            }
          },
          {
            featureType: "subway",
            elementType: "all",
            stylers: {
              lightness: -100,
              saturation: -91
            }
          },
          {
            featureType: "railway",
            elementType: "geometry",
            stylers: {
              lightness: -84
            }
          },
          {
            featureType: "all",
            elementType: "labels.text.stroke",
            stylers: {
              color: "#313131"
            }
          },
          {
            featureType: "all",
            elementType: "labels",
            stylers: {
              color: "#8b8787",
              lightness: -19,
              visibility: "off"
            }
          },
          {
            featureType: "manmade",
            elementType: "geometry",
            stylers: {
              color: "#1b1b1b"
            }
          },
          {
            featureType: "local",
            elementType: "geometry",
            stylers: {
              lightness: -97,
              saturation: -100,
              visibility: "off"
            }
          },
          {
            featureType: "subway",
            elementType: "geometry",
            stylers: {
              lightness: -76
            }
          },
          {
            featureType: "railway",
            elementType: "all",
            stylers: {
              lightness: -40,
              visibility: "off"
            }
          },
          {
            featureType: "boundary",
            elementType: "geometry",
            stylers: {
              color: "#8b8787",
              weight: "1",
              lightness: -29
            }
          }
        ]
      });
      fetch("./static/line.csv")
        .then(res => res.text())
        .then(data => {
          // console.log(data, "?");
          var options = {
            strokeStyle: "rgba(50, 50, 255, 0.8)",
            lineWidth: 0.05,
            globalCompositeOperation: "lighter",
            draw: "simple"
          };

          var dataSet = mapv.csv.getDataSet(data);

          new mapv.baiduMapLayer(map, dataSet, options);
        });
    }
  },
  created() {},
  mounted() {
    this.init();
  }
};
</script>
<style lang="scss" scoped>
.wrapper {
  height: 100vh;
  width: 100vw;
  #map {
    width: 100%;
    height: 100%;
  }
}
</style>
